<!--
    Powered By nodePPT - This is probably the best web presentation tool so far!
    version: 0.9.8-3
    site: https://github.com/ksky521/nodePPT
-->
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>python_08_前端 - By woniuppp</title>
    <link rel="stylesheet" media="all" href="./css/nodeppt2.0.css">
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="./css/phone.css">
    <link rel="stylesheet" media="print" href="./css/pdf.css">
    <link rel="stylesheet" href="./js/highlight/styles/monokai_sublime.css">
    <link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<div class="slides">
    <slides id="container">
        <slide class="slide"><section class="slide-wrapper"><article class="flexbox vcenter">
<h1>python基础教程<em>08</em>前端</h1>
<p><small>woniuppp</small></p>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>前端三兄弟</h2>

</hgroup><article>

<ul>
<li>html 负责内容<ul>
<li>各种标签</li>
<li>显示什么内容由html控制</li>
</ul>
</li>
<li>css 负责样式<ul>
<li>设置属性</li>
<li>内容显示成什么样子，由css控制</li>
</ul>
</li>
<li>javascript 负责动态效果，数据处理（js）<ul>
<li>交互由js决定</li>
<li>js算是真正意义上的编程语言</li>
</ul>
</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>html</h2>

</hgroup><article>

<ul>
<li>描述网页的一种语言</li>
<li>一套标签，不能算是编程语言</li>
<li>负责网页的内容</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>html</h2>

</hgroup><article>

<ul>
<li>html</li>
<li>head<ul>
<li>title</li>
<li>style
-</li>
</ul>
</li>
<li>body<ul>
<li>p</li>
<li>form</li>
<li>input</li>
<li>a</li>
<li>img</li>
<li>select</li>
<li>span</li>
<li>div</li>
</ul>
</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>css</h2>

</hgroup><article>

<ul>
<li>负责样式</li>
<li>描述性语言</li>
</ul>

</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h1>#</h1>

</hgroup><article>


</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h1>#</h1>

</hgroup><article>


</article></section></slide>
<slide class="slide"><section class="slide-wrapper"><hgroup>
<h2>微信公众号</h2>

</hgroup><article>

<p><img src="./logo.jpg" alt="reboot" title="reboot"></p>

</article></section></slide>
        <slide class="slide thank-you-slide segue nobackground">
            <article class="flexbox vleft auto-fadein">
                <h2>Q &amp; A</h2>
                <h3>&lt;Thank You!&gt;</h3>
            </article>
        </slide>
        <slide class="slide logoslide dark nobackground">
            <article class="flexbox vcenter">
              <h2 style="color: white;">Powered By nodePPT v0.9.8-3</h2>
            </article>
          </slide>
        <div class="slideTip" id="tip"></div>
    </slides>
</div>
<canvas id="drawBoard" class="draw-board" width="900" height="700"></canvas>
<div class="progress"><span id="progress"></span></div>
<div id="_buttons">
    <div class="_btn-box" id="_btn-box" style="display:none;">
        <button class="fa fa-arrow-circle-left" id="_btn-prev"></button>
        <button class="fa fa-arrow-circle-right" id="_btn-next"></button>
        <button class="fa fa-paint-brush" id="_btn-brush"></button>
        <button class="fa fa-compress" id="_btn-overview" data-toggle="fa fa-expand"></button>
    </div>
    <button class="fa fa-bars" id="_btn-bar"  data-toggle="fa fa-close"></button>
</div>
<script src="./js/mixjs/lib/mix.0.3.0.min.js"></script>
<script>
var base = location.protocol + '//' + location.host;

var path = location.pathname.split('/').filter(function(v){
    return !!v;
});
path.pop();
path = path.join('/');
MixJS.config({
    baseURL: [ base, path, 'js'].join('/')+'/'
});

</script>
<script src="./js/mixjs/lib/event/broadcast.js"></script>
<script src="./js/nodeppt.js"></script>
<script>
Slide.init({
    containerID: 'container',
    drawBoardID: 'drawBoard',
    slideClass: '.slide',
    buildClass: '.build',
    progressID: 'progress',
    transition: 'slide',
    width: 1100,
    dir: './',
    
    //打开下面的注释就开启postMessage方式
    //访问网址127.0.0.1:8080/ppt/demo#client
    control:{
        type: 'postMessage',
        args:{
            isControl:  false
        }
    },
    
    tipID: 'tip'
});
MixJS.loadJS('highlight/hljs-0.8.js',function(){
    hljs.tabReplace = '  ';
    hljs.initHighlightingOnLoad();
});
</script>
<script src="./js/demo.js"></script>
<link rel="stylesheet" href="./css/demo.css">
</body>
</html>
